<template>
	<view>
		<view class="coupon">
			<scroll-view scroll-x="true" class="couponBox nowrap ">
				<view class="Li" v-for="(item,index) in pageData" :key="index">
					<view class="Cous" @click="getCounpons(item,index)">
						<view class="Counet ellipsis">
							<text class="h6 m-right4">{{item.unit}}{{item.price}}{{item.priElse}}</text>
							<text class="couName">{{item.title}}</text>
						</view>
						<view class="Draw">{{ item.receivingStatus ? '已领取' : item.receivingName}}</view>
					</view>
				</view>
			</scroll-view>

			<view class="lookMore" @click.stop="show = true">
				<view class="lookTxt">查看更多</view>
				<text class="iconfont icon-a-zujian32 color_33 size22"></text>
			</view>
		</view>

		<u-popup :show="show">
			<view class="Upop" v-if="couponsData.length">
				<view class="Upop_Top">
					<view class="Tabs">
						<u-tabs :list="couponsData" keyName="type" :inactiveStyle="inactiveStyle"
							:activeStyle="activeStyle" :current="current" @click="clickCoupons" :lineColor="color"
							:lineHeight="2"></u-tabs>
					</view>
					<view class="iconfont icon-guanbi1 black size30" @click.stop="show = false"></view>
				</view>
				<view class="CuponeBox">
					<view class="couList" v-for="(item,index) in couponsData[current].list" :key="index">
						<view class="couPrice">
							<view class="d-flex a-center color bold" v-if="item.type == 1">
								<text class="size30 m-top20">{{item.unit}}</text>
								<text class="size68">{{item.price}}</text>
							</view>
							<view class="d-flex a-center color bold" v-if="item.type == 2">
								<text class="size68">{{item.price}}</text>
								<text class="size30 m-top20">{{item.priElse}}</text>
							</view>
							<text class="ellipsis h6 text-center color">{{item.remark}}</text>
						</view>
						<view class="couInfo">
							<text class="ellipsis couName">{{item.title}}</text>
							<view class="couType">{{restrictTxt(item.restrict)}}</view>
							<!-- 	<view class="couType">{{item.restrict | restrictTxt}}</view> -->
							<text class="ellipsis_2 Explain">{{item.info}}</text>
						</view>
						<view class="couState" :class="{'Claimed':item.receivingStatus == 1}"
							@click="getCounpons(item,index)">
							<view class="couDown">{{ item.receivingStatus ? '已领取' : item.receivingName}}</view>
						</view>
					</view>
					<emptys v-if="!couponsData[current].list" empty="coupon" title="暂无相关内容"></emptys>
				</view>
			</view>
		</u-popup>


		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<!-- 0无属性 1抵用券，2折扣卷，3兑换券 , 4免邮券 5积分券 6余额券 7兑换券 ,99套券 -->
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['pageData', 'coupons_cate'],
		data() {
			return {
				show: false,
				current: 0,
				showModal: false,
				activeStyle: {
					color: '#000',
					fontSize: '30rpx'
				},
				inactiveStyle: {
					color: '#333',
					fontSize: '28rpx'
				},
				couponsData: [],
			}
		},
		methods: {
			clickCoupons(e) {
				this.current = e.index;
			},

			getCounpons(Item, index) {
				if (!this.vid) return this.showModal = true
				if (Item.receivingStatus) return this.$Toast('已领取')
				this.$http.post({
					url: '/SRA_simMallApi/SortOneCoupons',
					data: {
						vId: this.vid,
						couponsId: Item.cou_id
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg)
					Item.receivingStatus = 1
				})
			},
			restrictTxt(Val) {
				const num = Number.parseInt(Val)
				switch (num) {
					case 1:
						return '首单消费';
					case 2:
						return '商城消费';
					case 3:
						return '直接使用';
					case 4:
						return '线下券';
					default:
						return ''
				}
			}
		},


		computed: {
			...mapState(['color', 'vid']),
		},
		watch: {
			coupons_cate(newVal) {
				if (newVal) this.couponsData = newVal
			}
		}

	}
</script>

<style lang="scss" scoped>
	.coupon {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		border-top: 1rpx solid $page;
		display: flex;
		align-items: center;
		border-radius: 0 0 10rpx 10rpx;
		overflow: hidden;

		.couponBox {
			width: 610rpx;

			.Li {
				width: 300rpx;
				height: 50rpx;
				display: inline-block;
				background-color: #ffcc99;
				-webkit-mask-image: radial-gradient(circle at right 70rpx bottom 4rpx, transparent 4rpx, red 4rpx), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
				-webkit-mask-size: 100%, 4rpx 12rpx;
				-webkit-mask-repeat: repeat, repeat-y;
				-webkit-mask-position: 0 4rpx, calc(100% - 70rpx);
				-webkit-mask-composite: source-out;
				mask-composite: subtract;
				margin-left: 10rpx;
				position: relative;
				border-radius: 6rpx;

				.Cous {
					width: 100%;
					height: 100%;
					display: block;
					display: flex;
					align-items: center;

					.Counet {
						flex: 1;
						color: #fff;
						font-size: 22rpx;
						display: block;
						padding-left: 10rpx;
					}

					.Draw {
						width: 70rpx;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						color: #fff;
					}
				}
			}
		}



		.lookMore {
			width: 100rpx;
			height: 100%;
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;

			.lookTxt {
				width: 50rpx;
				color: #333;
				font-size: 20rpx;
			}
		}

	}

	.Upop {
		width: 100%;
		display: flex;
		flex-direction: column;

		.Upop_Top {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;

			.Tabs {
				flex: 1;
				height: 100%;
				padding-left: 24rpx;
			}

			.icon-guanbi1 {
				padding: 24rpx 36rpx 24rpx;
				font-weight: bold;
			}
		}

		.CuponeBox {
			width: 100%;
			height: 800rpx;
			padding: 0 24rpx 50rpx 24rpx;
			overflow-y: scroll;
			background-color: $page;

			.couList {
				width: 100%;
				height: 200rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-top: 24rpx;
				display: flex;
				padding: 4rpx;
				-webkit-mask-image: radial-gradient(circle at right 150rpx bottom 8px, transparent 8px, red 8.5rpx), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
				-webkit-mask-size: 100%, 4rpx 8rpx;
				-webkit-mask-repeat: repeat, repeat-y;
				-webkit-mask-position: 0 8px, calc(100% - 148rpx);
				-webkit-mask-composite: source-out;
				mask-composite: subtract;

				.couPrice {
					width: 200rpx;
					height: 100%;
					background-color: #ffe0cc;
					border-radius: 10rpx 0 0 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}

				.couInfo {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 10rpx 20rpx;
					justify-content: space-between;
					align-items: flex-start;

					.couName {
						color: #000;
						font-size: 30rpx;
						font-weight: bold;
					}

					.couType {
						padding: 0 10rpx;
						color: #333;
						background-color: #ccffff;
					}

					.Explain {
						color: #333;
						font-size: 24rpx;
					}
				}

				.couState {
					width: 146rpx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.couDown {
						width: 120rpx;
						height: 50rpx;
						background-color: var(--color);
						border: 1rpx solid var(--color);
						border-radius: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 24rpx;
						overflow: hidden;
					}
				}

				.Claimed {
					.couDown {
						background-color: transparent !important;
						color: var(--color) !important;
					}
				}
			}
		}
	}
</style>